<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框圆角</title>
    <style>
      div {
        width: 400px;
        height: 400px;
        border: black solid 2px;
        margin: 0 auto;
        /* 圆角的第一种写法*/
        /*border-radius: 200px;*/
        /* 第二种*/
        /*border-radius: 50%;*/
        /* 第三种 先写上下再写左右*/
        /*border-top-left-radius: 20px;*/
        /*border-bottom-left-radius: 20px;*/
        /*border-top-right-radius: 20px;*/
        /*border-bottom-right-radius: 20px;*/
        /*第三种写法 写出来是椭圆*/
        /*border-top-right-radius: 50px 20px;*/
        /*border-bottom-right-radius: 50px 20px;*/
        /*border-top-left-radius: 50px 20px;*/
        /*border-bottom-left-radius: 50px 20px;*/
        /* 最后一种写法  先写x方向 再写y方向 遵循 上左 上右 下右 下左的顺序*/
        border-radius: 50px 30px 20px 10px / 25px 15px 10px 5px;
      }
    </style>
</head>
<body>
  <div></div>
</body>
</html>